<template>
  <div>
    <img
      class="user-poster"
      :src="imageUrl"
    />

    <div style="margin: 0 auto; padding: 20px;" >
      <span>{{ guestTitle }} {{ lastName }}</span>
      <span style="margin-left: 20px;">{{ maskMobile }}</span>
    </div>
    
    <van-cell-group>
      <van-cell icon="points" title="健身记录" is-link @click="navigateTo('/history')" />
      <van-cell icon="gold-coin-o" title="购卡历史" is-link @click="navigateTo('/card-history')" />
      <van-cell icon="aim" title="清理缓存" is-link @click="clearCache" />
    </van-cell-group>

    <van-dialog v-model:show="show" title="提示" message="是否清理所有缓存并注销登录？" show-cancel-button @confirm="clear" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useCache } from '@/hooks/web/useCache'
import { useRouter } from 'vue-router'

const appStore = useAppStore()
appStore.setTabbarIndex(1)

const show = ref(false)
const maskMobile = computed(() => appStore.getSecretMobile)
const lastName = computed(() => appStore.getLastName)
const guestTitle = computed(() => appStore.getGuestTitle)
const imageUrl = computed(() => appStore.getMyImage)

const { push } = useRouter()

const navigateTo = (url) => {
  push(url)
}

const clear = () => {
  const { wsCache } = useCache()
  wsCache.clear()
  location.reload()
}

const clearCache = () => {
  show.value = true
}

</script>

<style lang="scss">
.user {
  &-poster {
    width: 100%;
    height: 53vw;
    display: block;
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>
